﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="mobile_lottery.aspx.cs" Inherits="mobile_lottery" %>

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>幸运抽奖</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">

td{width:20%;font-family:"微软雅黑"; background-color:#666; text-align:center;line-height:30px; font-size:15px; }
input, textarea, select, button { font-size: 10px;}
 .playcurr{ background-color:#F60;}
 .playnormal{ background-color:#666;}
 .play_btn{ width:75px; height:30px; display:block; background-color:#F60;border:0; cursor:pointer; font-family:"微软雅黑";  font-size:10px;}

    </style>
</head>

<body style="text-align:center;background-color:lightgrey;min-height:300px;min-width:100%;margin-left:0px;">
    <form id="form1" runat="server">
    <div style="font-family:'Microsoft YaHei UI';text-align:left;color:snow;margin-left:8px;">
                      <img src="QRCODE/哔哩哔哩.jpg" alt="" width="50px" height="50px" style="width:50px;height:50px;float:left;margin-top:-5px;margin-left:8px;margin-bottom:0px"/>
         <h1><b>微百科平台</b></h1>
     </div>
    <div style="background-color:gray;color:white;padding:2px;height:20px;margin-left:0px">
        <div style="float:left;margin-left:8px;">幸运抽奖</div>
    </div>
    <div style="position:absolute;left:-999em;top:120px;text-align:center;width:100%"  id="get" >
        <asp:Label runat="server" ID="prise1">

        </asp:Label>
        <asp:Label runat="server" ID="prise2">

        </asp:Label>
<br />
        <asp:Button runat="server" ID="getprise" style="width:30%" Text="点击领奖" OnClick="getprise_Click" />
    </div>
<div class="play rel" style="margin-left:auto;margin-right:auto;" >
                 <p class="btn_arr abs" style="position:relative;left:35%;top:109px;width:30%"><input style="width:100%"  value="点击领奖" id="btn1" type="button" onclick="StartGame()" class="play_btn" ></p>
<table id="tb" style="width:100%;margin-left:auto;margin-right:auto;"" cellpadding="0" cellspacing="1">
<tr>
    <td id="t1">一等奖</td ><td id="t2">谢谢您</td><td id="t3">二等奖</td><td id="t4">谢谢您</td><td id="t5">三等奖</td>
</tr>
<tr>
    <td id="t16">谢谢您</td><td></td><td></td><td></td><td id="t6" >谢谢您</td>
</tr>
<tr>
    <td id="t15">谢谢您</td><td></td><td></td><td></td><td id="t7" >二等奖</td>
</tr>
<tr>
    <td id="t14">三等奖</td><td></td><td></td><td></td><td id="t8" >谢谢您</td>
</tr>
<tr>
    <td id="t13">谢谢您</td><td id="t12" >谢谢您</td><td id="t11">三等奖</td><td id="t10">谢谢您</td><td id="t9" >三等奖</td>
</tr>
</table>
</div>
<div style="text-align:left;" runat="server" id="lo" >
    <asp:Label runat="server" ID="de" Text="" ></asp:Label>

</div>
    <script type="text/javascript">

        /*
         * 删除左右两端的空格
         */
        function Trim(str) {
            return str.replace(/(^\s*)|(\s*$)/g, "");
        }

        /*
         * 定义数组
         */
        function GetSide(m, n) {
            //初始化数组
            var arr = [];
            for (var i = 0; i < m; i++) {
                arr.push([]);
                for (var j = 0; j < n; j++) {
                    arr[i][j] = i * n + j;
                }
            }
            //获取数组最外圈
            var resultArr = [];
            var tempX = 0,
             tempY = 0,
             direction = "Along",
             count = 0;
            while (tempX >= 0 && tempX < n && tempY >= 0 && tempY < m && count < m * n) {
                count++;
                resultArr.push([tempY, tempX]);
                if (direction == "Along") {
                    if (tempX == n - 1)
                        tempY++;
                    else
                        tempX++;
                    if (tempX == n - 1 && tempY == m - 1)
                        direction = "Inverse"
                }
                else {
                    if (tempX == 0)
                        tempY--;
                    else
                        tempX--;
                    if (tempX == 0 && tempY == 0)
                        break;
                }
            }
            return resultArr;
        }

        var index = 0,           //当前亮区位置
        prevIndex = 0,          //前一位置
        Speed = 300,           //初始速度
        Time,            //定义对象
        arr = GetSide(5, 5),         //初始化数组
          EndIndex = 0,           //决定在哪一格变慢
          tb = document.getElementById("tb"),     //获取tb对象 
          cycle = 0,           //转动圈数   
          EndCycle = 0,           //计算圈数
         flag = false,           //结束转动标志 
         quick = 0;           //加速
        hello = 0;      //结束点
        cishu = 0;      //次数
        btn = document.getElementById("btn1")

        function StartGame() {
            
            if(cishu<=0){
            <%=cost()%>;
            clearInterval(Time);
            cishu++;
            cycle = 0;
            flag = false;
            EndIndex = Math.floor(Math.random() * 16)+1;
            //EndCycle=Math.floor(Math.random()*4);
            EndCycle = 1;
            hello = (EndIndex + 5) % 16;
            Time = setInterval(Star, Speed);
            }
            else
                alert("您已经抽过奖了，请勿再次抽取。")
        }

        function Star(num) {
            //跑马灯变速
            if (flag == false) {
                //走五格开始加速
                if (quick == 5) {
                    clearInterval(Time);
                    Speed = 50;
                    Time = setInterval(Star, Speed);
                }
                //跑N圈减速
                if (cycle >= EndCycle + 1 && index == parseInt(EndIndex)) {
                    clearInterval(Time);
                    Speed = 300;
                    flag = true;       //触发结束    
                    Time = setInterval(Star, Speed);
                }
            }

            if (index >= arr.length) {
                index = 0;
                cycle++;
            }


            tb.rows[arr[index][0]].cells[arr[index][1]].className = "playcurr";
            if (index > 0)
                prevIndex = index - 1;
            else {
                prevIndex = arr.length - 1;
            }
            tb.rows[arr[prevIndex][0]].cells[arr[prevIndex][1]].className = "playnormal";
            //结束转动并选中号码
            //trim里改成数字就可以减速，变成Endindex的话就没有减速效果了
            if (flag == true && index == parseInt(hello)) {
                quick = 0;
                clearInterval(Time);

                if (document.getElementById("t" + (index + 1).toString()).innerText != "谢谢您") {
                    document.getElementById("get").style.left = "0%";
                    document.getElementById("prise1").innerText = "恭喜您中奖了！奖品是";
                    document.getElementById("prise2").innerText = document.getElementById("t" + (index + 1).toString()).innerText;
                }
                else {
                    alert("真可惜，您没有获得奖品，谢谢您的参加。");
                }
            }
            index++;
            quick++;

        }

    </script>
    </form>
</body>
</html>